<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.box{
			width: 100px;
			height: 100px;
			position: absolute;
			left: 0;
			top: 0;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box" class="box"></div>
	<script type="text/javascript" src="requestAnimation.js"></script>
	<script type="text/javascript" src="tween.js"></script>
	<script type="text/javascript" src="../css.js"></script>
	<script type="text/javascript">
		/*
			startMove(init)

			startMove({
				el:box,
				type:'easeOut',
				target:{
					left:10,
					translateX:100
				},
				time:500
			})
		 */
		(function(){
			var oBox = document.querySelector('#box');
			css(oBox,'translateX',0);
			css(oBox,'translateY',0);

			startMove({
				el:oBox,
				type:'easeOut',
				target:{
					translateX:100,
					translateY:100
				},
				callBack:function(){
					console.log('动画执行结束')
				},
				callIn:function(){
					console.log('动画执行中')
				},
				time:500
			})
		})();
		/*function startMove(init){

			//动画执行的初始次数
			var t = 0;
			//初始值
			var b = {};

			//目标差值
			var c = {};

			//动画执行的总次数
			var d = Math.ceil(init.time / 16.7);

			//一开始要先清除动画
			cancelAnimationFrame(init.el.timer);

			//1、设置初始值
			for(var attr in init.target){
				b[attr] = css(init.el,attr);
				c[attr] = init.target[attr] - b[attr];
			}


			init.el.timer = requestAnimationFrame(move);
			function move(){
				if(t > d){
					cancelAnimationFrame(init.el.timer);
					init.callBack && init.callBack.call(init.el);
				}else{
					t++;
					for(var attr in init.target){
						var val = Tween[init.type](t,b[attr],c[attr],d);
						css(init.el,attr,val);
					}
					init.callIn && init.callIn.call(init.el);
					init.el.timer = requestAnimationFrame(move);
				}
			}

		}*/


		function startMove(init){
			var t = 0; //每次循环所执行的次数
			var b = {};//动画执行前的初始值
			var c = {};//动画执行的最终差值
			var d = Math.ceil(init.time / 16.7); //动画执行的总次数

			cancelAnimationFrame(init.el.timer);


			//设置默认值与最终差值
			for(var attr in init.target){
				b[attr] = css(init.el,attr);
				c[attr] = init.target[attr] - b[attr];
			}


			init.el.timer = requestAnimationFrame(move);


			function move(){

				if(t > d){
					cancelAnimationFrame(init.el.timer);
					init.callBack && init.callBack.call(init.el);
				}else{

					t++;

					for(var attr in init.target){
						var val = Tween[init.type](t,b[attr],c[attr],d);
						css(init.el,attr,val);
					}
					init.callIn && init.callIn.call(init.el);
					init.el.timer = requestAnimationFrame(move);
				}

			}
		}
	</script>
</body>
</html>
